<template>
	
	<view class="scencelist">
		<!-- #ifdef H5 -->
		<Header @back = "backToWW()" left-icon="back" left-text="" right-text="" title="门票"></Header>
		<!-- #endif -->
			
		<!--搜索-->
		<view style="padding: 0;">
			<searchbar :placeholder="'请输入要搜索的景区名称'" @confirm="onSearchConfirm()"></searchbar>
		</view>
		
		<!--列表-->
		<view class="content">
			<block v-for="(item,index) in scences" :key="index">
				<view class="scence-list" @click='scenceClick(item.id,item.city,item.productId)'>
					<view class="scence-left">
						<image :src='item.listImage' style="border-radius: 10upx;"></image>
					</view>
					<view class="scence-right">
						<view class="scence-title">
							<text>{{item.title}}</text>
						</view>
						<view class="scence-tip" v-show="item.featureTip">
							<view class="tip-list">
								<block v-for="(item,index) in  item.featureTip" :key="index">
									<view class="tips" :class="item ? 'border-blue':'border-none'">
											<text>{{item}}</text>
									</view>
								</block>
							</view>
						</view>
						<view class="scence-position">
								<text>{{item.city}}</text>
								<text style="margin-left: 10upx;" v-if="item.star">{{item.star}}</text>
								<text style="margin-left: 10upx;" v-if="item.star">景区</text>
						</view>
						<view class="price" v-if="item.price" >
								<text style="color: #ff4d1d;font-size: 31upx;">￥</text>
								<text style="color: #ff4d1d; margin-right: 6upx;font-size: 47upx;" >{{item.price}}</text>
								<text style="color: #ff4d1d; font-size: 28upx;">起</text>
						</view>
					</view>
				</view>
			</block>
			<view class="noTime" v-if="fleg"><image style="width: 100%;height: 100%;" src="../../static/img/shuju.png" ></image></view>
		</view>
		<view style="margin-top: 40upx;margin-bottom: 40upx;">
			<wxc-flex v-if = 'isNoMore && scences.length > 0' dir='left' main='center' cross='center' style='width:100%;'>
					<vline color='#DDDDDD' width='120upx' height='1px'></vline>
					<text class='font-r' style='font-size:24upx;color:#464646;margin-left:26upx;margin-right:26upx;'>没有更多数据啦</text>
					<vline color='#DDDDDD' width='120upx' height='1px'></vline>
			</wxc-flex>
		</view>
		
	</view>
</template>
<style lang="scss" scoped>
	.noTime{
		width: 100%;
		height: 430upx;
		margin-top: 160upx;
		// font-size: 56upx;
		text-align: center;
		// padding-top: 300upx;
		// font-family: PingFang-SC-Bold;
		// letter-spacing: 10upx;
	}
	image{
			width: 100%;
			height: 100%;
		}
	.scencelist {
		width: 100%;
		background: #fff;
		// padding:0 24upx 0 24upx;
	}
	.content{
		padding: 0 24upx;
		// margin-top: 50upx;
	
	}
	.scence-list{
		
		// margin-top: 15upx;
		
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		// height: 220upx;
		padding: 20upx 0 20upx 0;
		border-bottom:1upx solid #eee;
	}
	.scence-left{
		border-radius: 10upx;
		width: 300upx;
		// border-bottom:1upx solid rgb(230,230,230);
		height: 216upx;
	}
	.scence-right{
		width: 62%;
		// display: flex;
		// flex-direction: column;
		// justify-content: space-between;
		position: relative;
		// align-content: space-between;
		padding: 6upx 16upx;


		.price{
			font-family: PingFang-SC-Medium;
			position: absolute;
			right: 0;
			bottom: 0;
			margin-right: 12upx;
			}
		.scence-title{
			font-weight: bold;
			font-size: 34upx;
			color: #3c3c3c;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}
		.scence-tip{
			margin-top: 18upx;
			// display: flex;
			// justify-content: space-between;
			.tip-list{
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				view{
					margin-right: 10upx;
				}
			}
			.tips{
				padding: 2upx;
				border-radius: 8upx;
				// width: 115upx;
				// height: 45upx;
				
				// background: red;
				color: #0092ff;
				font-size: 24upx;
				padding: 6upx;
				// text-align: center;
			}
			.border-blue{
				border:1px solid #0092ff;
			}
			.border-none{
				
			}
			
		}
		.scence-position{
			margin-top:25upx;
			font-size: 28upx;
			color: #888;
		}
		.scence-desc{
			margin-top: 12upx;
			font-size: 26upx;
			color: #666666;
			overflow: hidden;
			text-overflow:ellipsis;
			white-space: nowrap;
		}
	}

</style>
<script>
	import searchbar from "@/components/search-bar.vue"
	import wxcFlex from "@/components/custom/flex.vue"
	import popupLayer from '@/components/popup-layer/popup-layer.vue';
	import vline from "@/components/custom/vline.vue"
	import wxcElip from "@/components/custom/wxc-elip.vue"
	import hldLabel from "@/components/custom/hld-label.vue"
	import cityList from "@/components/custom/city-list.vue"
	import hldPrice from "@/components/custom/hld-price.vue"
	import Header from "@/components/header.vue"
	var tempKeyword = ''; //用于触底刷新
	var keyword = "";
	var currentPage = 1;
	export default {
		components: {
			searchbar,
			wxcFlex,
			popupLayer,
			vline,
			wxcElip,
			hldLabel,
			cityList,
			hldPrice,
			Header
		},
		data() {
			return {
				fleg:false,
				citys:"",
				popupMenu: [],
				bShowCities: false,
				tuijians: [],
				area: "兰州市",
				tabIndex: 0,
				scences: [],
				types: [{
					title: '综合排序',
				}, {
					title: '推荐度',
				}],
				isEmpty: false,
				isNoMore: false
			}
		},
		onLoad: function(options) {
			var that = this;
			this.citys = options.city
			if(options&&options.keyword){
				keyword = options.keyword;
			}
			
			//获取当前城市
			if (options && options.city) {
				this.area = options.city;
			} else {
				this.area = this.pub.getLocalcity();
			}
			
			//获取城市列表
			this.popupMenu = this.pub.getCities();
			if (this.popupMenu || this.popupMenu.length == 0) {
				// this.pub.getCityList(function(res) {
				// 	// that.popupMenu = that.pub.getCities()
				// })
			}
			//获取推荐数据
			// this.$postApi(this.$path.QUERY_SHOW_CHILD_INFO, {
			// 	positionId: 7
			// }).then(data => {
			// 	if (data.data.success) {
			// 		this.tuijians = data.data.items
			// 	}
			// })
			//获取景区数据
			currentPage = 1;
			this.getNewScenceList();
			// this.getScenceList()
		},
		onShow() {
			//#ifdef H5
			document.title = '门票'
			//#endif
		},
		onReachBottom: function() {
			if (!this.isNoMore) {
				this.getNewScenceList();
			}
		},
		computed: {

		},
		methods: {
			backToWW(){
				console.log("返回万维");
			},
			onSearchInput: function(e) {
				tempKeyword = e.detail.value
				console.log(tempKeyword)
			},
			onPopupClick: function(e) {
				this.bShowCities = !this.bShowCities
			},
			onPopupItemClick: function(e) {
				console.log(e)
				let city = e.currentTarget.dataset.name;
				if (city != this.area) {
					this.area = city;
					currentPage = 1;
					this.isNoMore = false;
					this.getScenceList();
				}
				this.bShowCities = false;
			},
			onSearchConfirm: function(e) {
				this.scences = []
				console.log(e)
				keyword = tempKeyword;
				currentPage = 1;
				this.isNoMore = false;
				this.getNewScenceList(e.detail.value);
			},
			onTabChange: function(e) {
				if (this.tabIndex == e.currentTarget.dataset.index)
					return
				currentPage = 1;
				this.tabIndex = e.currentTarget.dataset.index
				this.isNoMore = false;
				this.getScenceList();
			},
			upx2px(udp) {
				return uni.upx2px(udp) + "px";
			},
			onTuijianClick(item) {
				this.pub.jumpToRecommendation(item)
			},
			scenceClick(id,citys,productId) {
				uni.navigateTo({
					url: '/pages/scence/scencedetail?id=' + id + '&city=' + citys + '&productId=' + productId,
					animationType: "pop-in",
					animationDuration: 200
				})
			},
			getNewScenceList(title){
				// var that = this;
				var params = {
					pageIndex:currentPage,
					pageSize:"10",
					isclose:"0",
					city:this.citys,
					title:title ? title : '',
					channelType:'1'
				};
				this.$postApi(this.$path.GET_SCENIC_LIST,params).then(res => {
					var that = this;
					console.log("景区返回数据--------->",res.data);
					if(res.data.success){
						this.fleg = false
						let list = res.data.data.list;
						list.forEach((item)=>{
							item.listImage = this.pub.delLastf(item.listImage)
							item.featureTip = item.featureTip ? item.featureTip.toString().split(';') : ''
							if(item.featureTip){
								item.featureTip.pop()
							}
							switch(item.star){
								case '一星':
									item.star = '1A';
								break;
								case '二星':
									item.star = '2A';
								break;
								case '三星':
									item.star = '3A';
								break;
								case '四星':
									item.star = '4A';
								break;
								case '五星':
									item.star = '5A';
								break;
								default:
									item.star = '';
								break;
							}
							
						});
						
						if (currentPage == 1) {
								var content = list;
							} else {
								var content = that.scences.concat(list);
							}
							
							// console.log("景区列表----------->",that.scences);
							var isNoMore = false;
							var isEmpty = false;
							if (content.length == 0) {
								isEmpty = true;
							} else if (!res.data.data.hasNextPage) {
								//已经无再多数据
								isNoMore = true;
							}

							currentPage++;
							that.isEmpty = isEmpty;
							that.isNoMore = isNoMore;
						
							that.scences = content;
							console.log("that.scences------------->",that.scences);
					}else{
						console.log("暂无数据")
						this.fleg = true
					}
				})
			},
			
		}
	}
</script>


